<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="item in crumbList" :key="item.name" :to="{ name:item.name }">{{ item.label }}</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
import {routes} from '@/router'
import { mapMutations } from 'vuex'
export default {
  data () {
    this.routesMap = new Map()
    this.initRoute(routes)
    return {
      crumbList: []
    }
  },
  methods: {
    ...mapMutations(['updateCurrentPath']),
    initRoute(routes){
      routes.forEach(route=>{
        this.routesMap.set(route.name,route.label)
        if(route.children){
          this.initRoute(route.children)
        }
      })
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(route){
        console.log('route:',route);
        console.log('crumbList',this.crumbList);
        console.log('routesMap',this.routesMap);
        
        this.updateCurrentPath(route.path)
        this.crumbList = route.matched.map(item=>{
          return {
            name: item.name,
            label: this.routesMap.get(item.name)
          }
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
